<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/common.css">
</head>
<style>
#kuang{
    width: 1200px;
    margin: 0 auto;
}
#header {
  height: 36px;
  border-bottom: 1px solid #cdcdcd;
  box-sizing: border-box;
  line-height: 35px;
  background-color: #f5f5f5;
}
#header .header_left {
  height: 35px;
  float: left;
}
#header .header_left li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_left li div {
  width: 79px;
  color: #919191;
}
#header .header_left li div span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_left li div:hover {
  color: #ff8500;
}
#header .header_left li a {
  font-size: 12px;
  color: #919191;
}
#header .header_left li a:hover {
  color: #ff8500;
}
#header .header_right {
  height: 35px;
  float: right;
}
#header .header_right li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_right li span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_right li i {
  font-size: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
#header .header_right li a {
  font-size: 12px;
  color: #919191;
  vertical-align: middle;
}
#header .header_right li:hover {
  color: #ff8500;
}
#header .header_right li:hover a {
  color: #ff8500;
}
</style>
<body>
<div id="kuang">
    <div id="header">
        <div class="cantainer">
            <ul class="header_left">
                <li>
                   <div>
                       中国大陆<span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <a href="#">亲，请登录</a>
                </li>
                <li>
                    <a href="#">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="header_right">
                <li>
                   <div>
                       <a href="#">我的淘宝</a><span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <i class="iconfont icon-gouwuche-copy"></i><a href="#">购物车</a><span class="iconfont icon-icon"></span>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-start"></i><a href="#">收藏夹</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <a href="#">商品分类</a>
                </li>
                <li>
                    <div>
                        <a href="#">千牛卖家中心</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">联系客服</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-toggle"></i><a href="#">网站导航</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
            </ul>
        </div>    
    </div>
<div class="page-header">
    <h1 style="background-color: #f40;"><span class="text-primary"></span><small style="color: black;">欢迎您，<a href="javascript:;" class="btn btn-warning logout">登出</a></small></h1>
</div>
<div class="jumbotron" style="padding-bottom:10px">
    <h1>淘！我喜欢</h1>
    <p>淘宝超值商品,优享品质,惊喜价格,商品齐全,淘你满意!上淘宝,惊喜随处可淘!来淘宝,一站式购物网站新体验,一网打尽,淘,你喜欢</p>
    <p><a class="btn btn-primary btn-lg" href="list.html" role="button" style="background-color: #f40;border: #f40;margin:50px 0 0 20px ;">去购物</a></p>
</div>
</div>
</body>
<script src="./js/cookie.js"></script>
<script type="text/javascript">
var username = getCookie("username");
if(username){
    document.querySelector(".page-header  span").innerText = username;
    document.querySelector(".page-header small a.logout").onclick = function(){
        removeCookie("username");
        document.querySelector(".page-header small").innerHTML = `
            <a class="btn btn-info" href="login.html">登陆</a>
            <a class="btn btn-danger" href="register.html">注册</a>
        `
    }
}else{
    document.querySelector(".page-header small").innerHTML = `
        <a class="btn btn-info" href="login.html">登陆</a>
        <a class="btn btn-danger" href="register.html">注册</a>
    `
}
</script>
</html>